<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px;" placeholder="输入设备名称查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.machine_name"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="editItem(v.row,v.$index)">编辑</a>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <a href="#" class="text-red" @click.prevent="deleteItem(v.row,v.$index)">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'toolingSearch',
  data: function () {
    return {
      api: this.$api.toolingSearch + 'GetmachineAddressList',
      apiCreate: this.$api.toolingSearch + 'InsertOrUpdatemachineAddress',
      apiEdit: this.$api.toolingSearch + 'InsertOrUpdatemachineAddress',
      apiSingle: this.$api.toolingSearch + 'GetById',
      apiDelete: this.$api.toolingSearch + 'DeleteById',
      // apiEdit: this.$api.machineType + 'add',
      name: '设备地址',
      columns: [
        { title: '设备名称', key: 'machine_name' },
        { title: '设备地址名称', key: 'machine_address_name' },
        { title: '设备地址值', key: 'machine_address_value' },
        { title: '创建人', key: 'create_user' },
        { title: '创建时间', key: 'create_time' },
        { title: '最后修改人', key: 'modify_user' },
        { title: '最后修改时间', key: 'modify_time' },
      ],
      fields: [
        { title: '设备名称', key: 'machine_name', required: true },
        { title: '设备地址名称', key: 'machine_address_name', required: true },
        { title: '设备地址值', key: 'machine_address_value', required: true },
      ],
      query: {
        machine_name: '',
        page: 1,
        size: 10,
      },
      initData: {},
      tableProps: {
        border: true,
        opsColWith: 100,
      },
    }
  },
  methods: {
    getList() {
      this.pageLoading = true
      let url = this.api
      this.$request(
        url +
          '?queryString.machine_name=' +
          this.query.machine_name +
          '&page=' +
          this.query.page +
          '&size=' +
          this.query.size,
        {},
        'get',
      )
        .then((r) => {
          this.list = this.formatList(r.list)
          this.total = r.total
        })
        .finally(() => {
          this.pageLoading = false
        })
    },

    editItem(v) {
      this.pageLoading = true
      let url = this.apiSingle
      this.$request(url, {
        vid: v.id,
      })
        .then((r) => {
          this.data = this.formatAfterGet(r)
          this.editFormVisible = true
        })
        .finally(() => {
          this.pageLoading = false
        })
    },

    deleteItem(v) {
      this.$confirm('确定要删除这条记录？').then(() => {
        this.pageLoading = true
        let url = this.apiDelete
        this.$request(url + '?vid=' + v.id, {}, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.getList()
          })
          .finally(() => {
            this.pageLoading = false
          })
      })
    },
  },
  created: function () {
    this.getList()
  },
}
</script>
<style scoped>
</style>
